<template>
  <div class="succee">
    <Loading :loading="loading">
      <Form :ref="formRef" :label-width="130" :model="formData" inline>
        <h3 class="title">对账信息</h3>
        <div class="formList">
          <FormItem label="差异:" style="width:30%">
            <div v-if="formData.errorAmount && formData.errorAmount != 0" class="errorAmount">{{ formData.errorAmount >= 0 ? `+${formData.errorAmount / 100}元` : `${formData.errorAmount / 100}元` }}</div>
            <div v-else>0.00元</div>
          </FormItem>
          <FormItem label="对账次数:" style="width:30%">
            <div>{{ formData.billCount }}</div>
          </FormItem>
          <FormItem label="应对账时间:" style="width:30%">
            <div>{{ formData.shouldBillDate }}</div>
          </FormItem>
          <FormItem label="对账时间:" style="width:30%">
            <div>{{ formData.completeDate }}</div>
          </FormItem>
          <FormItem label="差异原因:" style="width:30%">
            <div>{{ formData.errorRemark }}</div>
          </FormItem>
          <FormItem label="处理人:" style="width:30%">
            <div>{{ formData.errorHandle }}</div>
          </FormItem>
          <FormItem label="处理时间:" style="width:30%">
            <div>{{ formData.errorHandleTime }}</div>
          </FormItem>
        </div>
      </Form>

      <h3>平台清分流水</h3>
      <Table class="tables" border :columns="columns" :data="formBillResuleData"></Table>

      <h3>银行清分流水</h3>
      <Table class="tables" border :columns="columnsBank" :data="formBankBillData"></Table>

      <Form :label-width="130" :model="formOrderData" inline>
        <h3 class="title">订单信息</h3>
        <FormItem label="子订单号:" style="width:30%">
          <div>{{ formOrderData.subOrderId }}</div>
        </FormItem>
        <FormItem label="主订单号:" style="width:30%">
          <div>{{ formOrderData.orderId }}</div>
        </FormItem>
        <FormItem label="商品订单下单时间:" style="width:30%">
          <div>{{ formOrderData.createdDt }}</div>
        </FormItem>
        <FormItem label="支付订单号:" style="width:30%">
          <div>{{ formOrderData.order ? formOrderData.order.paymentId : '' }}</div>
        </FormItem>
        <FormItem label="支付流水:" style="width:30%">
          <div>{{ formOrderData.order ?　formOrderData.order.flowId : '' }}</div>
        </FormItem>
        <FormItem label="支付订单创建时间:" style="width:30%">
          <div>{{ formOrderData.payCreateTime }}</div>
        </FormItem>
        <FormItem label="支付订单交易时间:" style="width:30%">
          <div>{{ formOrderData.payTime }}</div>
        </FormItem>
        <FormItem label="商品名称:" style="width:30%">
          <div>{{ formOrderData.productName }}</div>
        </FormItem>
        <FormItem label="产品编码:" style="width:30%">
          <div>{{ formOrderData.productCode }}</div>
        </FormItem>
        <FormItem label="通道费率:" style="width:30%">
          <div>{{ formOrderData.rate ? `${ formOrderData.rate }%` : '0%' }}</div>
        </FormItem>
        <FormItem label="支付渠道:" style="width:30%">
          <div>{{ formOrderData.payChannel }}</div>
        </FormItem>
        <FormItem label="订单金额:" style="width:30%">
          <div v-if="formOrderData.order.orderAmount">{{ formOrderData.order.orderAmount | moneyNUm }}</div>
          <!-- <div>{{ formOrderData.order ? `${formOrderData.order.orderAmount / 100}` : '0.00' }}</div> -->
        </FormItem>
        <FormItem label="实付金额:" style="width:30%">
          <div v-if="formOrderData.order.payAmount">{{ formOrderData.order.payAmount | moneyNUm }}</div>
          <!-- <div>{{ formOrderData.order ? `${formOrderData.order.payAmount / 100}` : '0.00' }}</div> -->
        </FormItem>
        <FormItem label="是否优惠:" style="width:30%">
          <div>{{ formOrderData.isCoupon ? '是' : '否' }}</div>
        </FormItem>
        <FormItem label="支付方式:" style="width:30%">
          <div>{{ formOrderData.payWay }}</div>
        </FormItem>

        <div v-for="(i, ind) in formOrderData.coupons" :key="ind">
          <FormItem :label="`优惠券${ind+1}:`" style="width:30%">
            <div>{{ i.couponName }}</div>
          </FormItem>
          <FormItem label="优惠券编码:" style="width:30%">
            <div>{{ i.couponCode }}</div>
          </FormItem>
          <FormItem label="优惠金额:" style="width:30%">
            <div v-if="i.discount">{{ i.discount | moneyNUm }}</div>
          </FormItem>
        </div>
      </Form>

      <Form :label-width="130" :model="formMerchData" inline>
        <h3 class="title">商户信息</h3>
        <FormItem label="商户名称:" style="width:30%">
          <div>{{ formMerchData.merchantName }}</div>
        </FormItem>
        <FormItem label="商户编码:" style="width:30%">
          <div>{{ formMerchData.merchantCode}}</div>
        </FormItem>
        <FormItem label="组织机构:" style="width:30%">
          <div>{{ formMerchData.organizationName }}</div>
        </FormItem>
        <FormItem label="机构编码:" style="width:30%">
          <div>{{ formMerchData.organizationCode }}</div>
        </FormItem>
        <FormItem label="开户行:" style="width:30%">
          <div>{{ formMerchData.openingBank }}</div>
        </FormItem>
        <FormItem label="账户结算类型:" style="width:30%">
          <div>{{ formMerchData.accountTypeName }}</div>
        </FormItem>
        <FormItem label="银行账号:" style="width:30%">
          <div>{{ formMerchData.accountNo }}</div>
        </FormItem>
        <FormItem label="合同有效期:" style="width:30%">
          <!-- <div>{{ formMerchData.contractStartDate }} - {{ formMerchData.contractEndDate }}</div> -->
          <div v-if="formMerchData.contractStartDate">{{ `${formMerchData.contractStartDate} - ${formMerchData.contractEndDate}` }}</div>
        </FormItem>
      </Form>

      <Form :label-width="130" :model="formRuleData" inline>
        <h3 class="title">清分信息</h3>
        <FormItem label="清分规则名称:" style="width:30%">
          <div>{{ formRuleData.ruleName }}</div>
        </FormItem>
        <FormItem label="规则类型:" style="width:30%">
          <div>{{ formRuleData.ruleTypeCn }}</div>
        </FormItem>
        <FormItem label="结算类型:" style="width:30%">
          <div>{{ formRuleData.settlementTypeCn }}</div>
        </FormItem>
        <FormItem label="规则编码:" style="width:30%">
          <div>{{ formRuleData.ruleCode }}</div>
        </FormItem>
        <FormItem label="产品单价:" style="width:30%">
          <div>{{ formRuleData.productPrice }}</div>
        </FormItem>
        <FormItem label="清分规则:" style="width:30%">
          <div>{{ formRuleData.clearingRuleCn }}</div>
        </FormItem>
        <FormItem label="平台应收:" style="width:30%">
          <div>{{ formRuleData.clearingRule == '1' ? `${ formRuleData.platformReceivable }%` : formRuleData.clearingRule == '2' ?`${ formRuleData.platformReceivable }` : '0.00' }}</div>
        </FormItem>
        <FormItem label="商户应收:" style="width:30%">
          <div>{{ formRuleData.clearingRule == '1' ? `${ formRuleData.merchantReceivable }%` : formRuleData.clearingRule == '2' ? `${ formRuleData.merchantReceivable }` : '0.00' }}</div>
        </FormItem>
        <FormItem label="规则优先级:" style="width:30%">
          <div>{{ formRuleData.priorityLevel }}</div>
        </FormItem>
        <FormItem label="规则生效日期:" style="width:30%">
          <div>{{ formRuleData.effectiveDate }}</div>
        </FormItem>
        <FormItem label="规则失效日期:" style="width:30%">
          <div>{{ formRuleData.expireDate }}</div>
        </FormItem>
        <FormItem label="清分周期:" style="width:30%">
          <div v-if="formRuleData.clearingCycleMode === '1'">T + {{ formRuleData.clearingCycleValue }}</div>
          <div v-else>{{ formRuleData.clearingCycleValue }}日/{{ formRuleData.clearingCycleValueExt }}个月</div>
        </FormItem>
        <FormItem label="订单核销时间:" style="width:30%">
          <div>{{ formRuleData.verifiedTime }}</div>
        </FormItem>
        <FormItem label="应清算日期:" style="width:30%">
          <div>{{ formRuleData.shouldClearDate }}</div>
        </FormItem>
      </Form>
      <Button type="primary" @click="goBack" style="margin-bottom: 10px">返回</Button>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../Module/succeedBillModule";
import {
  InputNumber,
  Input,
  Button,
  Select,
  Form,
  FormItem,
  Message,
  Option,
  Tag,
  Table
} from "view-design";
import Loading from "@/components/Loading";
import RemoteSelect from "@/components/RemoteSelect";
import RemoteTableSelect from "@/components/RemoteTableSelect";
import SearchBar from "@/components/SearchBar";
import Uuid from "uuid";
import Authc from "@/components/Authc";
import util from '@/utils/util';

export default {
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect,
    RemoteTableSelect,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    Select,
    Option,
    Authc,
    Tag,
    Table
  },
  props: ["id"],
  beforeMount: async function() {
    try {
      let id = this.$route.query.id;
      let res = await this.$store.dispatch(`${namespace}/getDetail`, id);
      if (res.ret === 0) {
        let data = res.data;
        this.formData = data || {};
        this.formBillResuleData = data.platformBillRes || {};
        this.formBankBillData = data.bankBillRes || {};
        this.formOrderData = data.orderRes || {};
        this.formMerchData = data.merchantRes || {};
        this.formRuleData = data.settlementRuleRes || {};
      }
    } catch (error) {
      this.$Message.error({
        content: error
      });
    }
  },
  data() {
    return {
      formRef: Uuid.v1(),
      formData: {}, // 对账信息
      formBillResuleData: [], //平台清分流水
      formBankBillData: [], // 银行清分流水
      formOrderData: {}, // 订单信息
      formMerchData: {}, // 商户信息
      formRuleData: {}, // 清分信息

      columns: [
        {
          title: "费用类型",
          align: "center",
          key: "costTypeCn",
          minWidth: 100
        },
        {
          title: "应清分日期",
          align: "center",
          key: "shouldClearDate",
          minWidth: 170
        },
        {
          title: "商户号",
          align: "center",
          key: "merchantCode",
          minWidth: 220
        },
        {
          title: "清分金额(元)",
          align: "center",
          key: "clearAmount",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.clearAmount / 100;
            return h("span", util.toMoney(item));
          }
        },
        {
          title: "付款账户名",
          align: "center",
          key: "payAcctName",
          minWidth: 200
        },
        {
          title: "付款账号",
          align: "center",
          key: "payAcct",
          minWidth: 200
        },
        {
          title: "收款账户名",
          align: "center",
          key: "colAcctName",
          minWidth: 220
        },
        {
          title: "收款账号",
          align: "center",
          key: "colAcct",
          minWidth: 200
        }
        // {
        //   title: "状态",
        //   align: "center",
        //   key: "billStatusCn",
        //   minWidth: 100
        // }
      ],
      columnsBank: [
        {
          title: "清分批次号",
          align: "center",
          key: "clearBatchNo",
          minWidth: 180
        },
        {
          title: "招行订单号",
          align: "center",
          key: "bankOrderId",
          minWidth: 230
        },
        {
          title: "外部订单号",
          align: "center",
          key: "orderId",
          minWidth: 200
        },
        {
          title: "子订单号",
          align: "center",
          key: "subOrderId",
          minWidth: 210
        },
        {
          title: "商户号",
          align: "center",
          key: "subMchId",
          minWidth:160
        },
        {
          title: "付款账户名",
          align: "center",
          key: "payAcctName",
          minWidth: 200
        },
        {
          title: "付款账号",
          align: "center",
          key: "payAcct",
          minWidth: 200
        },
        {
          title: "收款账户名",
          align: "center",
          key: "colAcctName",
          minWidth: 200
        },
        {
          title: "收款账号",
          align: "center",
          key: "colAcct",
          minWidth: 200
        },
        {
          title: "清分金额(元)",
          align: "center",
          key: "clearAmount",
          minWidth: 150,
          render: (h, params) => {
            let item = params.row.clearAmount / 100;
            return h("span", util.toMoney(item));
          }
        },
        {
          title: "订单日期",
          align: "center",
          key: "payTime",
          minWidth: 150
        },
        {
          title: "核销时间",
          align: "center",
          key: "verifiedTime",
          minWidth: 180
        }
      ]
    };
  },
  created() {},
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  },
  computed: {
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  },
  filters: {
        moneyNUm (num) {
            if (num == 0 || !num) {
                return '0.00';
            } else {
                console.log(num, '44')
                num = parseFloat(num / 100);
                num = num.toFixed(2);
                num = num.toLocaleString();
                if (num.indexOf('.') < 0) {
                num = num + '.00';
                }
                return num;
                // let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                // return reg.test(val)
            }
        }
    }
};
</script>

<style lang="less">
.succee {
  .title {
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
  }
  .errorAmount{
    color: red;
  }
  .tables {
    margin-bottom: 20px;
  }
}
</style>
